<template>
  <div class="delivery-track">
    <el-card>
      <div slot="header">
        <span>订单信息</span>
      </div>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="订单编号">{{ orderInfo.orderNo }}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ orderInfo.createTime }}</el-descriptions-item>
        <el-descriptions-item label="收货人">{{ orderInfo.customerName }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ orderInfo.phone }}</el-descriptions-item>
        <el-descriptions-item label="配送地址" :span="2">{{ orderInfo.address }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card class="track-timeline">
      <div slot="header">
        <span>配送轨迹</span>
      </div>
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :type="activity.type"
          :color="activity.color"
          :timestamp="activity.timestamp"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </el-card>

    <el-card v-if="showMap" class="track-map">
      <div slot="header">
        <span>配送位置</span>
      </div>
      <div id="map" style="height: 400px;"></div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'DeliveryTrack',
  data() {
    return {
      orderInfo: {
        orderNo: '',
        createTime: '',
        customerName: '',
        phone: '',
        address: ''
      },
      activities: [],
      showMap: false
    }
  },
  created() {
    this.getOrderInfo()
    this.getTrackInfo()
  },
  methods: {
    async getOrderInfo() {
      try {
        // 这里替换为实际的API调用
        const orderNo = this.$route.params.orderNo
        const response = await this.fetchOrderInfo(orderNo)
        this.orderInfo = response.data
      } catch (error) {
        console.error('获取订单信息失败:', error)
        this.$message.error('获取订单信息失败')
      }
    },
    async getTrackInfo() {
      try {
        // 这里替换为实际的API调用
        const orderNo = this.$route.params.orderNo
        const response = await this.fetchTrackInfo(orderNo)
        this.activities = response.data
      } catch (error) {
        console.error('获取配送轨迹失败:', error)
        this.$message.error('获取配送轨迹失败')
      }
    },
    // 模拟API调用
    fetchOrderInfo(orderNo) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve({
            data: {
              orderNo: orderNo,
              createTime: '2024-03-01 10:00:00',
              customerName: '张三',
              phone: '13800138000',
              address: '北京市朝阳区xxx街道xxx号'
            }
          })
        }, 500)
      })
    },
    fetchTrackInfo(orderNo) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve({
            data: [
              {
                content: '订单已签收',
                timestamp: '2024-03-01 14:00:00',
                type: 'success',
                color: '#67C23A'
              },
              {
                content: '快递员正在配送',
                timestamp: '2024-03-01 13:00:00',
                type: 'warning',
                color: '#E6A23C'
              },
              {
                content: '快递已出库',
                timestamp: '2024-03-01 11:00:00',
                type: 'primary',
                color: '#409EFF'
              },
              {
                content: '订单已确认',
                timestamp: '2024-03-01 10:00:00',
                type: 'info',
                color: '#909399'
              }
            ]
          })
        }, 500)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.delivery-track {
  padding: 20px;
  
  .el-card {
    margin-bottom: 20px;
  }
  
  .track-timeline {
    .el-timeline {
      padding: 20px;
    }
  }
}
</style> 